import React,{PureComponent} from 'react';
import {TopicWrapper,TopicItem} from '../styled';
import { connect} from "react-redux";

class Topic extends PureComponent{
    render(){
        const {list}=this.props;
        return <TopicWrapper>
            {list.map((item)=>{
                return   <TopicItem key={item.get('id')}>
                    {/*牢记，使用了 immutable之后，普通对象已经转换为immutable对象。想要获取store里的数据，通过 get()获取*/}
                    <img className='topic-pic'
                         src={item.get('imgUrl')}
                         alt=""/>
                   {item.get('title')}
                </TopicItem>
            })}
        </TopicWrapper>
    }

}
const mapStateToProps=(state)=>{
    return {
        list:state.getIn(['home','topicList'])
    }
}
export default connect(mapStateToProps,null)(Topic);